//个人中心
<template>
	<view class="mine">
		<view class="no-login" v-if="hasLogin === false">
			<view class="tips">登录后才可以查看信息哦</view>
			<view class="uni-btn-v uni- uni-common-mt">
				<!-- #ifdef MP-TOUTIAO -->
				<button type="primary" class="page-body-button" v-for="(value,key) in providerList" @click="tologin(value)" :key="key">
					登录
				</button>
				<!-- #endif -->
				<!-- #ifndef MP-TOUTIAO -->
				<button type="primary" class="page-body-button" v-for="(value,key) in providerList" @getuserinfo='tologin(value, $event)' open-type="getUserInfo" :key="key">{{value.name}}</button>
				<!-- #endif -->
			</view>
		</view>
		<view class="login" v-else>
			<view class="header">
				<image :src="avatar" class="avatar" mode="aspectFit" />
				<text class="name">{{nickName}}</text>
			</view>
			<!-- <uni-list>
				<uni-list-item title="我的订单" showArrow clickable @click="handleToMyOrder" rightText="查看全部" />
			</uni-list>
			<view class="order-type-list">
				<navigator url="" class="order-type-item">
					<image class="type-img" src="../../static/mine/wait.png" mode="aspectFit"></image>
					<text class="type-name">待付款</text>
				</navigator>
				<view class="order-type-item">
					<image class="type-img" src="../../static/mine/wait-group.png" mode="aspectFit"></image>
					<text class="type-name">待成团</text>
				</view>
				<view class="order-type-item">
					<image class="type-img" src="../../static/mine/wait-car.png" mode="aspectFit"></image>
					<text class="type-name">待发货</text>
				</view>
				<view class="order-type-item">
					<image class="type-img" src="../../static/mine/wait-recive.png" mode="aspectFit"></image>
					<text class="type-name">待收货</text>
				</view>
			</view> -->
			
			<uni-list>
				<uni-list-item title="我的课程" showArrow clickable @click="handleToMyCourse" />
				<uni-list-item title="问题反馈" showArrow clickable @click="handleReturn" />
				<uni-list-item title="关于" showArrow clickable @click="handleToAbout" />
			</uni-list>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import { wxLogin } from '../../api/index.js'

	export default {
		data() {
			return {
				title: 'login',
				providerList: [],
				avatar:  uni.getStorageSync('avatar'),
				nickName:  uni.getStorageSync('nickName')
			}
		},
		computed: {
			...mapState(['hasLogin'])
		},
		onLoad() {
			uni.getProvider({
				service: 'oauth',
				success: (result) => {
					this.providerList = result.provider.map((value) => {
						let providerName = '';
						switch (value) {
							case 'weixin':
								providerName = '微信登录'
								break;
							case 'qq':
								providerName = 'QQ登录'
								break;
							case 'sinaweibo':
								providerName = '新浪微博登录'
								break;
							case 'xiaomi':
								providerName = '小米登录'
								break;
							case 'alipay':
								providerName = '支付宝登录'
								break;
							case 'baidu':
								providerName = '百度登录'
								break;
							case 'toutiao':
								providerName = '头条登录'
								break;
							case 'apple':
								providerName = '苹果登录'
								break;
						}
						return {
							name: providerName,
							id: value
						}
					});

				},
				fail: (error) => {
					console.log('获取登录通道失败', error);
				}
			});
		},
		methods: {
			...mapMutations(['login']),
			handleToMyCourse() {
				
				uni.navigateTo({
					url: '../myCourse/myCourse',
					
				})
			},
			handleToMyCollect() {
				
			},
			handleToQs() {
				
			},
			handleModifyPw() {
				
			},
			handleReturn() {
				uni.navigateTo({
					url: '../return/return'
				})
			},
			handleToAbout() {
				uni.navigateTo({
					url: '../about/about'
				})
			},
			tologin(provider, e) {
				const _this = this;
				console.log(e.detail)
				console.log(provider)
				uni.showLoading({
					title: '登录中...'
				})
				uni.login({
					provider: provider.id,
					success: (res) => {
						console.log('login success:', res);
						// 更新保存在 store 中的登录状态
						this.login(provider.id);
						// #ifdef MP-WEIXIN
						console.warn('如需获取openid请参考uni-id: https://uniapp.dcloud.net.cn/uniCloud/uni-id')
						uni.getUserInfo({
							success(res) {
								console.log(res);
								_this.nickName = res.userInfo.nickName;
								_this.avatar = res.userInfo.avatarUrl;
								uni.setStorageSync('nickName', res.userInfo.nickName);
								uni.setStorageSync('avatar', res.userInfo.avatarUrl);
							},
							fail() {
								uni.showToast({
									icon: 'none',
									title: '获取用户信息失败'
								})
							}
						})
						
						wxLogin({
							code: res.code,
							encryptedData: e.detail.encryptedData,
							iv: e.detail.iv
						}).then(res => {
							console.log('wxLogin', res);
							if (res.status !== 200 || !res.oData.openId) {
								console.log('获取openid失败：', res);
								return
							}
							uni.setStorageSync('openid', res.oData.openId)
						}).catch(e => {
							console.log('获取openid失败：', e);
						}).finally(() => {
							uni.hideLoading();
							if(!uni.getStorageSync('openid')) {
								uni.showToast({
									icon: 'none',
									title: '授权失败'
								})
							}
						})
						// #endif
					},
					fail: (err) => {
						console.log('login fail:', err);
					}
				});
			}
		}
	}
</script>

<style>
	
	.no-login {
		padding: 0 10px;
		margin-top: 30px;
	}
	
	.tips {
		padding: 30px 0;
		font-size: 14px;
		color: #333;
		text-align: center;
	}
	
	button {
		background-color: #007aff;
		color: #ffffff;
	}
	
	.login .header {
		display: flex;
		align-items: center;
		margin-bottom: 10px;
		width: 100%;
		padding: 10px 0;
		background-color: #fff;
		color: #000;
		text-align: center;
	}
	
	.avatar {
		width: 50px;
		height:50px;
		border-radius: 50%;
		margin: 0 20px;
	}
	
	.name {
		color: #000;
		font-size:16px;
	}
	
	.order-type-list {
		display: flex;
		margin-bottom: 10px;
		border-top: 1px solid #f2f2f2;
		background-color: #fff;
	}
	
	.order-type-item {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		flex: 1;
		padding: 15px;
		text-align: center;
	}
	
	.order-type-item .type-img {
		width: 20px;
		height: 20px;
		margin-bottom: 5px;
	}
	
	.order-type-item .type-name {
		font-size: 12px;
		color: #000;
	}
</style>
